﻿<template>
  <div id="divPath" class="pull-left" :style="divStyle">
    <el-button ref="backBtn" id="backBtn" icon="iconfont icon-xitongfanhui" class="pull-left pathBtn" @click="backDir()"></el-button>
    <span id="DirPathPlace" class="pull-left" v-show="dirPlaceShow" >
      <input ref="dirPathInput" v-model="currentValue" type="text" :style="dirPlaceStyle">
    </span>
    <span id="PathPlaceBtn" class="pull-left" :style="pathPlaceStyle" v-show="pathPlaceShow" @click="showDirPlace()">
      <div style="width:100%;">
        <ul style="left: 0px;width:100%">
          <li v-for="(s,index) in paths" :key="index"><a @click="clickPathLink(index)">{{s}}</a></li>
        </ul>
      </div>
    </span>
    <el-button id="PathSearchBtn" icon="iconfont icon-search" class="pull-left pathBtn" @click="search()"></el-button>
  </div>
</template>
<style scoped>
.pull-left {
  float: left!important;
}
.pathBtn {
  border: #ccc 1px solid;
}
#PathPlaceBtn {
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    padding: 0;
    width: 60%;
    cursor: text;
    overflow: hidden;
}
#PathPlaceBtn ul {
    display: inline-block;
    width: auto;
    position: relative;
}
#PathPlaceBtn li {
    background: url(/static/style/common/images/ico-ltr.png) no-repeat right center;
    padding-left: 10px;
    padding-right: 18px;
    float: left;
}
#PathPlaceBtn li a {
    display: inline-block;
    cursor: pointer;
}
</style>
<script>
export default {
  props: ['isShow', 'isEnable', 'isReadOnly', 'value'],
  data () {
    return {
      divStyle: 'height:30px',
      pathPlaceStyle: 'heigth:28px;line-height:26px;',
      dirPlaceStyle: '',
      pathPlaceShow: true,
      dirPlaceShow: false,
      currentValue: '',
      canEmpty: true
    }
  },
  computed: {
    paths () {
      let rtn = []
      if (!this.currentValue) return rtn
      let arr = this.currentValue.replaceAll('\\', '/').replaceAll('//', '/').split('/')
      for (let s in arr) {
        if (arr[s]) {
          rtn.push(arr[s])
        }
      }
      return rtn
    },
    isWindowsPath () {
      if (this.currentValue) {
        let v = this.currentValue.replaceAll('\\', '/').replaceAll('//', '/')
        var rtn = v.startsWith('/')
        if (rtn) return false
        var arr = v.split('/')
        if (arr[0].endsWith(':')) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    myEnable () {
      if (this.isEnable === undefined) {
        return true
      } else {
        return this.isEnable
      }
    },
    myReadonly () {
      if (this.isReadOnly === undefined) {
        return false
      } else {
        return this.isReadOnly
      }
    }
  },
  methods: {
    initpage () {
      this.currentValue = this.value
      this.$refs.dirPathInput.onblur = () => {
        this.showPathPlace()
      }
    },
    clearData () {
    },
    backDir () {
      // if (this.paths.length > 1) {
      var arr = this.paths
      if (this.isWindowsPath) {
        arr.pop()
        this.currentValue = arr.join('/')
      } else {
        arr.pop()
        this.currentValue = '/' + arr.join('/')
      }
      // }
      this.$emit('update:value', this.currentValue)
      this.$emit('search', this.currentValue)
    },
    clickPathLink (index) {
      if (this.paths.length > index) {
        var arr = this.paths.slice(0, index + 1)
        if (this.isWindowsPath) {
          this.currentValue = arr.join('/')
        } else {
          this.currentValue = '/' + arr.join('/')
        }
        this.$emit('update:value', this.currentValue)
        this.$emit('search', this.currentValue)
      }
      let e = window.event
      // 如果提供了事件对象，则这是一个非IE浏览器
      if (e && e.stopPropagation) {
        // 因此它支持W3C的stopPropagation()方法
        e.stopPropagation()
      } else {
        // 否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true
      }
    },
    rendControls () {
      let backBtnStyle = window.getComputedStyle(document.querySelector('#backBtn'))
      let pathPlaceStyle = window.getComputedStyle(document.querySelector('#PathPlaceBtn'))
      this.divStyle = 'width:100%;margin-bottom:10px;height:' + backBtnStyle.height
      this.pathPlaceStyle = 'height:' + backBtnStyle.height + ';' + 'line-height:' + backBtnStyle['line-height'] + ';' + 'padding-top:' + backBtnStyle['padding-top']
      this.$nextTick(() => {
        this.dirPlaceStyle = 'height:' + backBtnStyle.height + ';' + 'line-height:' + backBtnStyle['line-height'] + ';' + 'width:' + pathPlaceStyle.width
      })
    },
    showDirPlace () {
      if (this.myEnable && this.myReadonly === false) {
        this.dirPlaceShow = true
        this.pathPlaceShow = false
        this.$nextTick(() => {
          this.$refs.dirPathInput.focus()
        })
      }
    },
    showPathPlace () {
      this.dirPlaceShow = false
      this.pathPlaceShow = true
    },
    search () {
      this.$emit('update:value', this.currentValue)
      this.$emit('search', this.currentValue)
    }
  },
  mounted () {
    this.initpage()
    this.$nextTick(() => {
      this.rendControls()
    })
  },
  updated () {
  },
  watch: {
    isShow: {
      handler: function (val, oldVla) {
        if (val) {
          this.initpage()
        } else {
          this.clearData()
        }
      }
    },
    value: {
      handler: function (val, oldVla) {
        this.currentValue = val
      }
    }
  }
}
</script>
